<script setup lang="ts">
import common from "_s/common/localstore";
import ChangePasswordComponent from "./changePassword.vue";

const router = useRouter();
const { dialog } = useQuasar();

const model = ref(false);
const component = shallowRef();
const changePassword = () => {
  component.value = ChangePasswordComponent;
  model.value = true;
};

const userInfo = () => {
  // component.value = () => import("./userInfo.vue");
  // model.value = true;
};

const logout = () => {
  dialog({
    title: "提示",
    message: "确定要退出登录吗？",
    cancel: true
  }).onOk(() => {
    common.setToken("");
    void router.push({ path: "/login" });
  });
};
</script>

<template>
  <div>
    <q-btn-dropdown
      class="text-center"
      color="width"
      icon="img:/images/logo.png"
      flat
      padding="xs"
      label="超级管理员"
    >
      <q-list style="min-width: 100px">
        <q-item
          clickable
          @click="changePassword"
        >
          <q-item-section side>
            <q-icon
              size="16px"
              name="lock"
            ></q-icon>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ $t("user.changePassword") }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          clickable
          @click="userInfo"
        >
          <q-item-section side>
            <q-icon
              size="16px"
              name="fa-solid fa-id-badge"
            ></q-icon>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ $t("user.info") }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          clickable
          @click="logout"
        >
          <q-item-section side>
            <q-icon
              class="q-ml-xs"
              size="14px"
              name="fa-solid fa-person-walking-arrow-right"
            ></q-icon>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ $t("user.logout") }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>

    <q-dialog v-model="model">
      <component
        :is="component"
        v-model="model"
      ></component>
    </q-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
